<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Coco Modal Examples</title>
  <link rel="stylesheet" href="./example.css" />
</head>

<body>
  <script src="./coco-modal.min.js"></script>
  <script src="./example.js"></script>
  <!--  初始化  -->
  <script>
    coco.init();
  </script>
  <!--  基础  -->
  <div class="alert-btn" data-type="base">基础</div>
  <script>
    example("base", () => {
      coco("欢迎使用Coco Modal！");
    });
  </script>

  <!--  alert  -->
  <div class="alert-btn" data-type="alert">alert</div>
  <script>
    example("alert", () => {
      coco.alert("alert");
    });
  </script>

  <!--  alert  -->
  <div class="alert-btn" data-type="confirm">confirm</div>
  <script>
    example("confirm", () => {
      coco.confirm("confirm");
    });
  </script>

  <!--  所有参数初始值  -->
  <div class="alert-btn" data-type="args">所有参数初始值</div>
  <script>
    example("args", () => {
      coco({
        text: `
          let initOptions = {
              maskClose: true,
              header: true,
              footer: true,
              title: '提示',
              text: '',
              width: '500px',
              top: '15vh',
              inputAttrs: false,
              escClose: true,
              okButton: true,
              cancelButton: true,
              okText: '确定',
              cancelText: '取消',
              closeButton: true,
              html: '',
              zIndexOfModal: 1995,
              zIndexOfMask: 2008,
              zIndexOfActiveModal: 2020,
              autoFocusOkButton: true,
              autoFocusInput: true,
              fullScreen: false,
              borderRadius: '6px',
              blur: false,
              buttonColor: '#4285ff',
              hooks: {
                open() {},
                opened() {},
                close() {},
                closed() {},
              },
              destroy: false,
              animation: false
          }
          `,
        top: "center",
        cancelButton: false,
        okText: "关闭",
        title: "所有参数初始值",
        maskClose: false,
        closeButton: false,
        buttonColor: "#ffba00",
      });
    });
  </script>
  <!--  输入框  -->
  <div class="alert-btn" data-type="input">输入框</div>
  <script>
    example("input", () => {
      coco({
        title: "验证输入",
        inputAttrs: {
          placeholder: "your name",
        },
      }).onClose((cc, isOk, done) => {
        console.log(cc.closeType);
        if (isOk) {
          if (cc.inputValue.trim() === "") {
            cc.setErrorText("输入不能为空！");
          } else {
            cc.setErrorText(cc.inputValue);
            cc.inputEl.value = "";
          }
        } else {
          done();
        }
      });
    });
  </script>
  <!--  onMount (onMount只触发一次 hooks.open 每次打开都会触发)  -->
  <div class="alert-btn" data-type="onMount">onMount</div>
  <script>
    example("onMount", () => {
      coco({
        footer: false,
        top: "center",
        title: "图片预览",
        html: `
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://www.jq22.com/img/cs/500x300-1.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://www.jq22.com/img/cs/500x300-2.png">    
                        </div>
                        <div class="swiper-slide">
                            <img src="https://www.jq22.com/img/cs/500x300-3.png">
                        </div>
                <div class="swiper-slide">
                    <img src="https://www.jq22.com/img/cs/500x300-4.png">
                </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div>
            <p class="tip">在 onMount 里创建轮播 onMount只触发一次</p>
              <p class="tip">  hooks.open 每次打开都会触发</p>
              </div>
        `,
        onMount(cc) {
          let { wrapper } = cc;
          let swiper = wrapper.querySelector(".swiper-container");
          new Swiper(swiper, {
            speed: 300,
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            pagination: {
              el: ".swiper-pagination",
            },
            loop: true,
          });
        },
        top: "center",
      });
    });
  </script>

  <!--  长内容  -->
  <div class="alert-btn" data-type="long">长内容</div>
  <script>
    example("long", () => {
      coco({
        title: "长内容",
        width: "600px",
        top: "30px",
        html: `
                 <div class="long" style="background-color: #fff;height:4000px;"></div>
                    `,
      }).onClose((cc, ok, done) => {
        if (ok) {
          coco("点击了Ok！");
        } else {
          cc.hideLoading();
          done();
        }
      });
    });
  </script>
  <!--  全屏  -->
  <div class="alert-btn" data-type="fullScreen">全屏</div>
  <script>
    example("fullScreen", () => {
      coco({
        title: "全屏",
        fullScreen: true,
        html: `
                  <div class="full" style="background-color: #fff;height:4000px;"></div>
                     `,
      }).onClose((cc, ok, done) => {
        if (ok) {
          coco("点击了Ok！");
        } else {
          done();
        }
      });
    });
  </script>

  <!--  DOM  -->
  <div id="login" class="coco-hidden">
    <div>
      <input type="text" class="input" placeholder="账号" />
    </div>
    <div>
      <input type="password" class="input" placeholder="密码" />
    </div>
    <div>
      <span class="tip">需要使用 class="coco-hidden" 将dom先隐藏着</span>
    </div>
  </div>
  <div class="alert-btn" data-type="dom">使用DOM做内容</div>
  <script>
    example("dom", () => {
      coco({
        title: "登录",
        el: "#login",
        okText: "提交",
      });
    });
  </script>

  <!--  DOM  -->
  <div class="alert-btn" data-type="Multiple">多个modal</div>
  <script>
    example("Multiple", () => {
      coco({
        top: "300px",
        text: "再打开一个",
        okText: "再打开一个",
      }).onClose((cc, ok, done) => {
        if (ok) {
          coco({
            top: "100px",
            text: "再打开一个",
            okText: "再打开一个",
          }).onClose((cc, ok, done) => {
            if (ok) {
              coco({
                top: "500px",
                text: "再打开一个",
                okText: "再打开一个",
              }).onClose((cc, ok, done) => {
                if (ok) {
                  coco("没有了！");
                } else {
                  done();
                }
              });
            } else {
              done();
            }
          });
        } else {
          done();
        }
      });
    });
  </script>

  <!--  不显示头部和脚部  -->
  <div class="alert-btn" data-type="hide">不显示头部和脚部</div>
  <script>
    example("hide", () => {
      coco({
        header: false,
        footer: false,
        text: "不显示头部和脚部",
      });
    });
  </script>
  <!--  居中  -->
  <div class="alert-btn" data-type="center">居中</div>
  <script>
    example("center", () => {
      coco({
        top: "center",
        text: "top:'center' 居中显示",
      });
    });
  </script>
  <!--  loading按钮  -->
  <div class="alert-btn" data-type="loading">loading按钮</div>
  <script>
    example("loading", () => {
      coco({
        top: "220px",
        text: "点击确定会显示loading动画",
      }).onClose((cc, ok, done) => {
        let tmr = null;
        if (ok) {
          cc.showLoading();
          tmr = setTimeout(() => {
            cc.hideLoading();
          }, 3000);
        } else {
          clearTimeout(tmr);
          cc.hideLoading();
          done();
        }
      });
    });
  </script>
  <!--  hooks  -->
  <div class="alert-btn" data-type="hooks" id="hooks">hooks</div>
  <script>
    let hooks = document.body.querySelector("#hooks");
    example("hooks", () => {
      coco({
        top: "20px",
        text: "一共有 open opened close closed 四个hook",
        hooks: {
          open(cc) {
            hooks.innerText = "open";
          },
          opened(cc) {
            hooks.innerText = "opened";
          },
          close(cc) {
            hooks.innerText = "close";
          },
          closed(cc) {
            hooks.innerText = "closed";
          },
        },
      });
    });
  </script>

  <!--  毛玻璃效果  -->
  <div class="alert-btn" data-type="blur">毛玻璃背景</div>
  <script>
    example("blur", () => {
      coco({
        text: "毛玻璃背景效果",
        blur: true,
      });
    });
  </script>

  <!--  按钮颜色  -->
  <div class="alert-btn" data-type="buttonColor">按钮颜色</div>
  <script>
    example("buttonColor", () => {
      coco({
        text: "自定义按钮颜色",
        buttonColor: "#e71e63",
      });
    });
  </script>
  <!--  没有动画  -->
  <div class="alert-btn" data-type="noAnimation">没有动画</div>
  <script>
    example("noAnimation", () => {
      coco({
        text:
          "没有动画时间。   (  开启动画时,打开动画时长为380ms，关闭动画为280ms  )",
        animation: false,
        buttonColor: "#ffba00",
      });
    });
  </script>
  <!--  关闭时销毁  -->
  <div class="alert-btn" data-type="destroy">关闭时销毁</div>
  <script>
    example("destroy", () => {
      let count = 0;
      let intv = null;
      coco({
        text: "0",
        title: "关闭时销毁modal",
        buttonColor: "#ffba00",
        destroy: true,
        onMount(cc) {
          intv = setInterval(() => {
            cc.textEl.innerText = ++count;
          }, 500);
        },
        hooks: {
          closed() {
            clearInterval(intv);
          },
        },
      });
    });
  </script>
  <!--  关闭时不销毁  -->
  <div class="alert-btn" data-type="notDestroy">关闭时不销毁</div>
  <script>
    example("notDestroy", () => {
      let count1 = 0;
      let intv1 = null;
      coco({
        text: "0",
        title: "关闭时不销毁",
        buttonColor: "#ffba00",
        onMount(cc) {
          intv1 = setInterval(() => {
            cc.textEl.innerText = ++count1;
          }, 500);
        },
        hooks: {
          open(cc) { },
        },
      });
    });
  </script>
</body>

</html>